<!DOCTYPE html>
<!-- saved from url=(0042)http://www.sucaihuo.com/jquery/2/283/demo/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>演示：CSS3制作响应式表格</title>
        <meta name="keywords" content="CSS3表格,table">
        <meta name="description" content="本文以实例演示如何使用css3来制作漂亮的响应式表格效果。">
        <style>

            * { 
                margin: 0; 
                padding: 0; 
            }
            body { 
                font: 14px/1.4 "Microsoft Yahei", Tahoma,Georgia, Serif; 
            }
            #page-wrap {
                margin: 10px;
            }
            p {
                margin: 20px 0; 
            }

            /* 
            Generic Styling, for Desktops/Laptops 
            */
            table { 
                width: 100%; 
                border-collapse: collapse; background:#fff
            }
            /* Zebra striping */
            tr:nth-of-type(odd) { 
                background: #eee; 
            }
            th { 
                background: #333; 
                color: white; 
                font-weight: bold; 
            }
            td, th { 
                padding: 6px; 
                border: 1px solid #ccc; 
                text-align: left; 
            }
            @media 
            only screen and (max-width: 760px),
            (min-device-width: 768px) and (max-device-width: 1024px)  {

                /* Force table to not be like tables anymore */
                table, thead, tbody, th, td, tr { 
                    display: block; 
                }

                /* Hide table headers (but not display: none;, for accessibility) */
                thead tr { 
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }

                tr { border: 1px solid #ccc; }

                td { 
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eee; 
                    position: relative;
                    padding-left: 50%; 
                }

                td:before { 
                    /* Now like a table header */
                    position: absolute;
                    /* Top/left values mimic padding */
                    top: 6px;
                    left: 6px;
                    width: 45%; 
                    padding-right: 10px; 
                    white-space: nowrap;
                }

                /*
                Label the data
                */
                td:nth-of-type(1):before { content: "姓名"; }
                td:nth-of-type(2):before { content: "性别"; }
                td:nth-of-type(3):before { content: "出生年月"; }
                td:nth-of-type(4):before { content: "班级"; }
                td:nth-of-type(5):before { content: "语文"; }
                td:nth-of-type(6):before { content: "数学"; }
                td:nth-of-type(7):before { content: "外语"; }
                td:nth-of-type(8):before { content: "综合"; }
                td:nth-of-type(9):before { content: "总分"; }
                td:nth-of-type(10):before { content: "名次"; }
            }

            /* Smartphones (portrait and landscape) ----------- */
            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px) {
                body { 
                    padding: 0; 
                    margin: 0;  }
            }

            /* iPads (portrait and landscape) ----------- */
            @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                body { 
                    width: 100%; 
                }
            }

        </style>
        <!--<![endif]-->
    </head>

    <body>

        <div id="page-wrap" style="margin:50px 0 0">
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>出生年月</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>外语</th>
                        <th>综合</th>
                        <th>总分</th>
                        <th>名次</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>蒋介</td>
                        <td>男</td>
                        <td>1998.2.5</td>
                        <td>H123</td>
                        <td>98</td>
                        <td>126</td>
                        <td>92</td>
                        <td>215</td>
                        <td>531</td>
                        <td>156</td>
                    </tr>
                    <tr>
                        <td>许维</td>
                        <td>女</td>
                        <td>1998.2.1</td>
                        <td>H128</td>
                        <td>133</td>
                        <td>120</td>
                        <td>109</td>
                        <td>236</td>
                        <td>598</td>
                        <td>26</td>
                    </tr>
                    <tr>
                        <td>汪函新</td>
                        <td>男</td>
                        <td>1998.12.23</td>
                        <td>H223</td>
                        <td>103</td>
                        <td>110</td>
                        <td>105</td>
                        <td>245</td>
                        <td>563</td>
                        <td>66</td>
                    </tr>
                    <tr>
                        <td>李广</td>
                        <td>男</td>
                        <td>1997.6.5</td>
                        <td>H122</td>
                        <td>112</td>
                        <td>85</td>
                        <td>130</td>
                        <td>210</td>
                        <td>539</td>
                        <td>112</td>
                    </tr>
                    <tr>
                        <td>赵少国</td>
                        <td>男</td>
                        <td>1999.1.5</td>
                        <td>H125</td>
                        <td>99</td>
                        <td>102</td>
                        <td>96</td>
                        <td>202</td>
                        <td>499</td>
                        <td>1025</td>
                    </tr>
                </tbody>
            </table>



        </div>



        <!-- 以下是统计及其他信息，与演示无关，不必理会 -->

        <p class="vad">
            <a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a>
            <a href="http://www.sucaihuo.com/js/283.html" target="_blank">说 明</a>
            <a href="http://www.sucaihuo.com/js/283.html" target="_blank">下 载</a>
        </p>
        <style>
            .vad { margin: 250px 0 5px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
            .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
            .vad a:hover { color: #fff; background-color: #000;}
            .thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid #fff;}
        </style>
    <div style="width:728px;margin:0 auto">
    <script type="text/javascript">
        /*700*90 创建于 2015-06-27*/
        var cpro_id = "u2182156";
    </script>
    <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div></body></html>